<template>
  <div class="myMainContainer">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="myMain">
          <div class="titleName">图片列表一</div>
          <div class="container" id="photoID_1" style="height: 600px; overflow: hidden; overflow-y: auto">
            <ul>
              <li>
                <img src="../../../src/assets/img/zdqsn_01.jpg">
              </li>
              <li>
                <img src="../../../src/assets/img/1638426814221.png">
              </li>
              <li>
                <img src="../../../src/assets/img/1638427080570.png">
              </li>
              <li>
                <img src="../../../src/assets/img/1638427113756.png">
              </li>
              <li>
                <img src="../../../src/assets/img/1638427123321.png">
              </li>
              <li>
                <img src="../../../src/assets/img/1644832145805.png">
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="myMain">
          <div class="titleName">图片列表二</div>
          <div class="container" id="photoID_2" style="height: 600px; overflow: hidden; overflow-y: auto">
            <ul>
              <li>
                <img src="../../../src/assets/img/1638426814221.png">
              </li>
              <li>
                <img src="../../../src/assets/img/1638427080570.png">
              </li>
              <li>
                <img src="../../../src/assets/img/1638427113756.png">
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="myMain">
          <div class="titleName">参数说明</div>
          <div class="container">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="参数">
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型">
              </el-table-column>
              <el-table-column
                prop="explain"
                label="说明">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="myMain">
          <div class="titleName">使用方式</div>
          <div class="container">
            <el-table
              :data="tableData2"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="调用方法">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
/** 必须的样式 **/
import './css/style.css'
/** 必须的JS文件 **/
import photo from './js/myPhoto'
export default {
  name: 'photoIndex',
  data () {
    return {
      tableData: [
        {
          name: 'photo.photoInfo(\'photoID_1\')',
          type: 'string',
          explain: '组件检索IMG标签的唯一标识'
        }
      ],
      tableData2: [
        {
          name: 'photo.photoInfo(\'photoID_1\')'
        }
      ]
    }
  },
  mounted () {
    photo.photoInfo('photoID_1')
    photo.photoInfo('photoID_2')
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
ul {
  padding: 0;
  margin: 0;
  li {
    list-style: none;
    margin-bottom: 10px;
    img {
      width: 100%;
      cursor: pointer;
    }
  }
}
</style>
